<style lang="scss" scoped>
    .choice-wrap {
        position: fixed;
        z-index: 12;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0;
        left: 0;
        background: #ffffff;
        padding-top: 40px;
        overflow-y: scroll;
        .title-wrap {
            font-size: 0;
            margin-left: 28px;
            .title {
                font-size: 24px;
                color: #9B9B9B;
            }
            .second-title {
                font-size: 24px;
            }
        }
        .common-btn{
            margin: 40px 28px;
        }
        .choice-list {
            padding-left: 28px;
            display: flex;
            margin-top: 60px;
            flex-wrap: wrap;
            .items {
                width: 154px;
                background: #F6F6F6;
                height: 40px;
                margin-bottom: 15px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                color: #9B9B9B;
                line-height: 40px;
                margin-right: 12px;
                &.selected{
                    background: $bgColor;
                    color: $white;
                }
            }
        }
    }
</style>

<template>
    <div class="choice-wrap">
        <h2 class="title-wrap">
            <span class="title">{{ targetOptions.title }}/</span>
            <span class="second-title">{{ targetOptions.secondTitle }}</span>
        </h2>
        <ul class="choice-list">
            <li class="items" v-for="(item,i) in targetOptions.choiceList" :class="{selected: item.selected}" @click="selectItem(item,i)">
                {{item.name}}
            </li>
        </ul>
        <mt-button type="primary" @click="submitSelect" v-if="targetOptions.multipleChoice" class="sure-btn common-btn">确 定</mt-button>
    </div>
</template>

<script>

export default {
	computed: {},
    filters: {
    
    },
    props: {
		targetOptions: {   //目的地
            type: Object,
            default() {
                return {}
            }
        },
    },
	data() {
		return {
			selected: [],
            choiceList: []
        };
	},
	mounted() {
    },
	methods: {
        selectItem(item,i){
            if(!this.targetOptions.multipleChoice){
                this.targetOptions.choiceList.forEach(res => {
                	res.selected = false
                })
                item.selected = !item.selected
                this.$set(this.targetOptions.choiceList,i,item)
                
                this.$emit('selectItem',this.targetOptions.choiceList)
            }else{
                item.selected = !item.selected
                this.$set(this.targetOptions.choiceList,i,item)
            }
        },
        submitSelect(){
        	
        	this.$emit("selectItem",this.targetOptions.choiceList)
        }
    }
};
</script>

